<template>
    <div class="pop-content">
        <live-player
            v-if="videoUrl"
            :video-url="videoUrl"
            live="true"
            muted="true"
            stretch="false"
        ></live-player>

        <div
            class="show-control"
            :class="{ active: showControl }"
            @click="showControl = !showControl"
        >
            <img :src="getPublicImageAssetsFile('ptz/ptz.svg')" alt="" />
        </div>
        <!-- 摄像头控制 -->
        <CameraControl v-show="showControl" :info="info" />
    </div>
</template>

<script setup lang="ts">
import { getDianxinToken, getVideoFlvUrl } from '@/api/camera'
import CameraControl from './CameraControl.vue'
import { getPublicImageAssetsFile } from '@/utils/tools'

// props定义
const props = defineProps<{
    info: any
}>()

// emit 定义
const emit = defineEmits(['close'])

// 视频地址
const videoUrl = ref('')

// 是否展示control
const showControl = ref(false)

// 获取视频地址
const fetchVideoUrlData = async () => {
    try {
        const { data } = await getVideoFlvUrl({
            serial: props.info.deviceId,
            code: props.info.channelId,
            videoAddress: props.info.address,
            isReplace: true,
        })
        if (data && data.FLV) {
            videoUrl.value = data.FLV
        } else {
            videoUrl.value = ''
        }
    } catch (error) {
        console.error(error)
    }
}

watch(
    () => props.info,
    () => {
        if (props.info) {
            if (props.info.address && props.info.address.includes('tieta')) {
                getDianxinToken({
                    deviceId: props.info.deviceId,
                }).then(res => {
                    window.open(
                        `http://125.122.36.122:8085/admin-api/business/data/get/playUrl?generatorCode=${props.info.deviceId}&token=${res.data}`,
                    )
                })
                emit('close')
            } else {
                fetchVideoUrlData()
            }
        }
    },
    {
        immediate: true,
    },
)
</script>

<style lang="scss" scoped>
.pop-content {
    width: 100%;
    height: 625px;
    background-color: #000;
    position: relative;

    .show-control {
        width: 36px;
        height: 36px;
        z-index: 9999;
        position: absolute;
        right: 180px;
        bottom: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        &.active {
            background-color: rgba(255, 255, 255, 0.4);
            border-radius: 4px;
        }

        > img {
            width: 20px;
        }
    }

    :deep(.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar) {
        opacity: 1 !important;
    }
}
</style>
